function reqHis(){
    var svg = d3.select("#requency")
    svg.selectAll( "*" )
        .remove()
    d3.csv("./data/csv/HR_comma_sep.csv").then( originData =>{
        let sl = "satisfaction_level", le = "last_evaluation";
        let plfy = "promotion_last_5years", wa = "Work_accident";

        // 字符数据转化成数字
        originData.forEach(d => {
            d['satisfaction_level']= +(d['satisfaction_level'])
            d['last_evaluation']= +(d['last_evaluation'])
            d['average_montly_hours']= +(d['average_montly_hours'])
            d['time_spend_company']= +(d['time_spend_company'])
            d['Work_accident']= +(d['Work_accident'])
            d['promotion_last_5years']= +(d['promotion_last_5years'])
            d['left']= +(d['left'])
            d['number_project']= +(d['number_project'])
        });

        // 筛选出满足条件的员工
        let data = [];
        let index = [];
        for(let i = 0; i < originData.length; i++) {
            if ( originData[i][sl] >= minSatis && originData[i][sl] <= maxSatis && originData[i][le] >= minEvalu && originData[i][le] <= maxEvalu && promotion == -1 && waccident == -1 ) {
                data.push( originData[i]['average_montly_hours'] )
                index.push( i )
            } else if ( originData[i][sl] >= minSatis && originData[i][sl] <= maxSatis && originData[i][le] >= minEvalu && originData[i][le] <= maxEvalu && originData[i][plfy] == promotion && waccident == -1 ) {
                data.push( originData[i]['average_montly_hours'] )
                index.push( i )
            } else if ( originData[i][sl] >= minSatis && originData[i][sl] <= maxSatis && originData[i][le] >= minEvalu && originData[i][le] <= maxEvalu && promotion == -1 && originData[i][wa] == waccident ) {
                data.push( originData[i]['average_montly_hours'] )
                index.push( i )
            } else if ( originData[i][sl] >= minSatis && originData[i][sl] <= maxSatis && originData[i][le] >= minEvalu && originData[i][le] <= maxEvalu && originData[i][plfy] == promotion && originData[i][wa] == waccident ) {
                data.push( originData[i]['average_montly_hours'] )
                index.push( i )
            }
        }
        // console.log(data)

        // 进行数据统计
        let dataTot = [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]]
        let totMax = [0, 0, 0, 0, 0, 0, 0, 0]
        if ( tableData.length == 0 ) {
            for ( let i = 0; i < data.length; i++ ) {
                dataTot[parseInt( data[i] / 50 )][originData[index[i]].left]++;
                totMax[parseInt( data[i] / 50 )]++;
            }
        } else {
            for ( let i = 0; i < tableData.length; i++ ){
                dataTot[parseInt( originData[tableData[i]]['average_montly_hours'] / 50 )][originData[tableData[i]].left]++;
                totMax[parseInt( originData[tableData[i]]['average_montly_hours'] / 50 )]++;
            }
        }
        // console.log(dataTot)

        var conf = {
            margin: {
                top: 10,
                bottom: 10,
                left: 10,
                right: 10
            },
            x: 40,
            y: 275,
            h: 230,
            step: 30
        }
        function fix(x){
            let cou = 0
            do {
                x = parseInt(x / 10)
                cou++;
            } while ( x > 0 )
            return 3.5 * cou
        }

        // 作坐标轴
        axisG = svg.append( 'g' )
        axisG.append( 'path' )
            .attr( 'd', `M ${conf.x} ${conf.y} l ${conf.step * 8} 0` )
            .attr( 'stroke-width', 1 )
            .attr( 'stroke', "#98F5FF" )
        for( let i = 0; i <= 8; i++){
            axisG.append( 'path' )
                .attr( 'd', `M ${conf.x + conf.step * i} ${conf.y} l 0 5`)
                .attr( 'stroke-width', 1 )
                .attr( 'stroke', "#98F5FF" )
            axisG.append( 'text' )
                .text( 50 * i )
                .attr( 'transform', `translate(${conf.x + conf.step * i - fix(x = 50 * i)}, ${conf.y + 15})` )
                .attr( 'fill', "#98F5FF" )
                .attr( 'font-size', 12)
                .attr('font-family', 'monospace')
        }
        let scaleY = d3.scaleLinear()
            .domain( [0, d3.max(totMax) * 1.2] )
            .range( [conf.h, 0] )
        let axisY = d3.axisLeft()
            .scale( scaleY )
        axisG.append( 'g' )
            .call( axisY )
            .attr( 'transform', `translate( ${conf.x}, ${conf.y - conf.h})` )
            .attr( "color", "#98F5FF" )
        let scaleR = d3.scaleLinear()
            .domain( [0, d3.max(totMax) * 1.2] )
            .range( [ 0, conf.h] )
        
        // 作直方
        let tooltip = d3.select("#tooltip2")
        for ( let i = 0; i < dataTot.length; i++ ) {
            svg.append( 'rect' )
                .attr( 'x', conf.x + i * conf.step )
                .attr( 'y', conf.y )
                .attr( 'width', conf.step )
                .attr( 'height', 0 )
                .attr( 'fill', Color[0] )
                .attr( 'stroke-width', 0.5 )
                .attr( 'stroke', '#000000')
                .on( 'mousemove', function(){
                    let x = window.event.clientX - 100;
                    let y = window.event.clientY - 40;
                    tooltip.html( '未离职人员' + '<br/>' + ( 100 * dataTot[i][0] / totMax[i] ).toFixed(2) + '%' + '<br/>' + dataTot[i][0] + '人' )
                        .style( 'position','absolute')
                        .style( 'left', x + 'px' )
                        .style( 'top', y + 'px' )
                        .style( 'color', 'white' )
                        .style( 'font-size', '18px' )
                        .style( 'caret-color', 'transparent' )
                        .style( 'background', 'grey' )
                    d3.select( this )
                        .attr( 'opacity', 0.6 )
                        .attr( 'stroke', 'white' )
                        .attr( 'stroke-width', 3 )
                })
                .on( 'mouseout', function() {
                    tooltip.html( '' )
                        .style( 'background', 'none' )
                    d3.select( this )
                        .attr( 'opacity', 1 )
                        .attr( 'stroke-width', 0.5 )
                        .attr( 'stroke', '#000000')
                })
                .transition()
                .duration( 1000 )
                .attr( 'y', conf.y - scaleR( dataTot[i][0] ) )
                .attr( 'height', scaleR( dataTot[i][0] ) )
            svg.append( 'rect' )
                .attr( 'x', conf.x + i * conf.step )
                .attr( 'y', conf.y - scaleR( dataTot[i][0] ) )
                .attr( 'width', conf.step )
                .attr( 'height', 0 )
                .attr( 'stroke-width', 0.5 )
                .attr( 'stroke', '#000000')
                .on( 'mousemove', function(){
                    let x = window.event.clientX - 80;
                    let y = window.event.clientY - 40;
                    tooltip.html( '离职人员' + '<br/>' + ( 100 * dataTot[i][1] / totMax[i] ).toFixed(2) + '%' + '<br/>' + dataTot[i][1] + '人' )
                        .style( 'position','absolute')
                        .style( 'left', x + 'px' )
                        .style( 'top', y + 'px' )
                        .style( 'color', 'white' )
                        .style( 'font-size', '18px' )
                        .style( 'caret-color', 'transparent' )
                        .style( 'background', 'grey' )
                    d3.select( this )
                        .attr( 'opacity', 0.6 )
                        .attr( 'stroke', 'white' )
                        .attr( 'stroke-width', 3 )
                })
                .on( 'mouseout', function() {
                    tooltip.html( '' )
                        .style( 'background', 'none' )
                    d3.select( this )
                        .attr( 'opacity', 1 )
                        .attr( 'stroke-width', 0.5 )
                        .attr( 'stroke', '#000000')
                })
                .transition()
                .delay( 1000 )
                .duration( 1000 )
                .attr( 'y', conf.y - scaleR( totMax[i] ) )
                .attr( 'height', scaleR( dataTot[i][1] ) )
                .attr( 'fill', Color[1] )
        }

        // 做图例
        let exmG = svg.append( 'g' )
        exmG.append( 'rect' )
            .attr( 'x', 245 )
            .attr( 'y', 10 )
            .attr( 'width', 30 )
            .attr( 'height', 12 )
            .attr( 'fill', Color[0] )
        exmG.append( 'text' )
            .text( '未离职人员' )
            .attr( 'transform', 'translate( 180, 21 )')
            .attr( 'font-size', 12 )
            .attr( 'fill', 'white' )
        exmG.append( 'rect' )
            .attr( 'x', 245 )
            .attr( 'y', 30 )
            .attr( 'width', 30 )
            .attr( 'height', 12 )
            .attr( 'fill', Color[1] )
        exmG.append( 'text' )
            .text( '离职人员' )
            .attr( 'transform', 'translate( 180, 41 )')
            .attr( 'font-size', 12 )
            .attr( 'fill', 'white')
    })
}
